<template>
  <div class="baseInfo">
    <view class="title">基本信息</view>
    <view class="grids gridColumns3 items">
      <view class="item">
        <view class="label">性别</view>
        <view class="value">{{user.sex==1?'男':'女'}}</view>
      </view>
      <view class="item">
        <view class="label">年龄</view>
        <view class="value">{{user.age}}</view>
      </view>
      <view class="item">
        <view class="label">星座</view>
        <view class="value">{{user.constellation}}</view>
      </view>
      <view class="item">
        <view class="label">学校</view>
        <view class="value">{{user.school}}</view>
      </view>
      <view class="item">
        <view class="label">城市</view>
        <view class="value">{{user.district}}</view>
      </view>
      <view class="item">
        <view class="label">职业</view>
        <view class="value">{{user.industry}}</view>
      </view>
    </view>

    <view class="flex alignCenter justifyBetween" @click="proxy.$utils.toLink('/packagePages/my/editInfo')">
      <view class="title">个人相册</view>
      <uv-icon name="arrow-right"></uv-icon>
    </view>
    <view class="photos flex">
      <view class="photo shrink" v-for="(url, index) in imageUrls" :key="index">
        <image :src="url" mode="aspectFill" @click="proxy.$auth.previewImage(imageUrls,index)" />
      </view>
    </view>

    <view class="desc" v-if="queryInfo_format(1)">
      <view class="name fz14 bold">自我描述</view>
      <view class="descText fz12">{{queryInfo_format(1).tbDescribe}}</view>
    </view>

    <view class="desc" v-if="queryInfo_format(3)">
      <view class="name fz14 bold">家庭背景</view>
      <view class="descText fz12">{{queryInfo_format(3).tbDescribe}}</view>
    </view>

    <view class="desc" v-if="queryInfo_format(4)">
      <view class="name fz14 bold">兴趣爱好</view>
      <view class="descText fz12">{{queryInfo_format(4).tbDescribe}}</view>
    </view>

    <view class="desc" v-if="queryInfo_format(2)">
      <view class="name fz14 bold">爱情观</view>
      <view class="descText fz12">{{queryInfo_format(2).tbDescribe}}</view>
    </view>

    <view class="desc" v-if="queryInfo_format(6)">
      <view class="name fz14 bold">理想的另一半</view>
      <view class="descText fz12">{{queryInfo_format(6).tbDescribe}}</view>
    </view>

    <view class="desc" v-if="queryInfo_format(5) && queryInfo_format(5).pictureUrls">
      <view class="name fz14 bold">语音介绍</view>
      <customAudio :audioSrc="queryInfo_format(5).pictureUrls[0]"></customAudio>
    </view>
  </div>
</template>

<script setup lang="ts">
import customAudio from "@/components/uv/customAudio.vue";

const { proxy } = getCurrentInstance();
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();
let props = defineProps(["userId"]);

let queryInfoList = ref([]); //查询信息
let imageUrls = ref([]); //图片地址

onMounted(() => {
  getInfo();
});

let user = computed(() => {
  return counter.slParams.userInfo;
});

async function getInfo() {
  let userId = props.userId ? props.userId : user.value.userId;

  //查询信息
  queryInfoList.value = await proxy.$apis.queryInfo({ userId });

  let picArr = [];
  let pics = await proxy.$apis.queryUserPic({ userId: user.value.userId });
  pics.forEach((element) => {
    picArr.push(element.pictureUrl);
  });
  picArr.unshift(user.value.logo);
  imageUrls.value = [...picArr];
}

function queryInfo_format(type) {
  let index = proxy.$utils.findIndexByField(queryInfoList.value, "type", type);
  if (index != -1) return queryInfoList.value[index];
}
</script>



<style lang="scss" scoped>
.items {
  gap: 10px 10px; //上下间距 左右间距
  margin-bottom: 25px;
}
.title {
}
.items {
  margin-top: 15px;
  .item {
    background-color: #f6f8fa;
    font-size: 14px;
    border-radius: 10px;
    padding: 10px;
    .label {
      color: #9d9d9d;
    }
    .value {
      color: #333333;
      margin-top: 5px;
      font-weight: bold;
    }
  }
}
.photos {
  margin-top: 10px;
  overflow-x: auto;
  .photo {
    width: 80px;
    height: 80px;
    margin-right: 10px;
    image {
      width: 100%;
      height: 100%;
      display: block;
      border-radius: 5px;
    }
  }
}
.desc {
  margin-top: 15px;
  color: #2c2c48;
  .descText {
    margin-top: 10px;
  }
}
</style>

